import React from 'react'
import { Table, Icon, Switch, Radio, Form, Divider, Popconfirm,Pagination } from 'antd';
import {inject, observer} from "mobx-react/index";
import Tip from "../../../common/tip"
@inject("store")
@observer
class EnrollActivityList extends React.Component {
    componentDidMount = () => {
        this.props.store.actions.getActivity()
    }
    render(){
        let store = this.props.store
        let _refreshFlag = store._refreshFlag
        const list=store.activities
        const page=store.page
        const columns = [{
            title: '活动名称',
            dataIndex: 'title',
            key: 'title',
            width: 200,
            render: (text,record) => <a href={`/activity/detail/${record.id}`}>{text}</a>,
        }, {
            title: '开始时间',
            dataIndex: 'startTime',
            key: 'startTime',
            width:200
        }, {
            title: '报名时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width:200
        },{
            title: '操作',
            key: 'action',
            width: 200,
            render: (text, record) => (
                <span>
                  <Popconfirm title="确定取消吗" onConfirm={()=>store.actions. cancelEnroll(record.id)}>
                    <a href="javascript:;">取消报名</a>
                  </Popconfirm>
                </span>
            ),
        }];
        const footer=()=>{
            return (
                <span style={{color:"#888",fontSize:"12px"}}>共{store.total}条数据，每页显示{page.pageSize}条</span>
            )
        }
        return(
            <div>
                <Tip title="已报名活动"/>
                <Table
                    columns={columns}
                    dataSource={list}
                    pagination={{
                        total: store.total,
                        pageSize: page.pageSize,
                        defaultPageSize: page.pageSize,
                        onChange:(page)=>store.actions.setCurrentPage(page)
                    }}
                    footer={footer}
                />
            </div>
        )
    }
}
export default  EnrollActivityList